import React, {Component} from 'react';
import {connect} from 'react-redux'
import SearchHeader from '../../components/Headers/SearchHeader/searchHeader'
import {Modal} from 'antd-mobile'
import _ from 'underscore'
import {changePath} from '../../actions/routerAction'
import Tag from '../../components/common/Tag/index'

import './search.scss'

@connect(
    state=>state.searchReducer,
    {changePath}
)
class Search extends Component {
    constructor(props){
        super(props);
        this.state={
            history:JSON.parse(localStorage.getItem('history'))||[],
            searchHot:['rec','电脑','照片扫描仪','智能手表','功夫茶杯','广角镜头手机'],
            searchList:[]
        }
    }
    //跳转到搜索结果列表
    gotoList(v){
        if(v){
            var newHistory=[...this.state.history,v];
        }else{
            var newHistory=[...this.state.history];
        }

        localStorage.setItem('history',JSON.stringify( _.uniq(newHistory)))
        sessionStorage.setItem('__search_prev_path__',this.props.location.pathname)
        this.props.history.push('/searchlist/'+v)
        this.props.changePath('/searchlist/'+v)
    }
    //清空最近搜索
    removeHistory(){
        let that=this;
        Modal.alert('提示', '是否清空最近搜索？', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确认', onPress: () => {
                    localStorage.removeItem('history')
                    that.setState({
                        history:JSON.parse(localStorage.getItem('history'))||[]
                    })
                } },
        ])
    }
    //挂载组件
    componentDidMount(){
        sessionStorage.removeItem('__cateId__')
    }
    render() {
        let querystring=this.props.location.query?this.props.location.query.s:'';
        return (
            <div className="search-page">
                <SearchHeader value={querystring} returnbtn={true} goto={this.gotoList.bind(this)}></SearchHeader>
                {
                    this.props.searchStr.length < 1
                        ? null : null
                }
                <div className="search-main">
                    <div className="search-land search-history">
                        <label>
                            <span>最近搜索</span>
                            <img src={require('../../assets/searchPageImgs/delete.png')} alt="delete" onClick={() => {
                                this.removeHistory()
                            }}/>
                        </label>
                        <div className="search-tag">
                            {
                                this.state.history.length > 0 ?
                                    this.state.history.map((v, i) => {
                                        return (<Tag key={i} onClick={() => {
                                            this.gotoList(v)
                                        }}>{v}</Tag>)
                                    })
                                    : <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Search;